import React, {Component} from 'react';
import {Actions} from 'react-native-router-flux'
import {
  StyleSheet,
  View,
  Text,
  TouchableOpacity,
} from 'react-native';
import Colors from '../../assets/colors'

const SelectPerson = props => {

  const {select, name, change, num} = props
  let bgColor = select ? styles.selectBg : styles.unselectBg

  return (
    <TouchableOpacity onPress={() => change(num)}>
      <View style={[styles.person, bgColor]}>
        <Text style={styles.personText}>{name}：{ select ? '已选择' : '未选择' }</Text>
      </View>
    </TouchableOpacity>
  )
}

export default class App extends Component<{}> {
  render() {

    const {userList, select, taskName, taskNum, taskId, submit} = this.props

    return (
      <View style={styles.container}>
        <View style={styles.taskContainer}>
          <Text style={{ fontSize: 30, }}>接收任务名称：{taskName}</Text>
          {/*<Text style={{ fontSize: 25, }}>任务编号：{taskNum}</Text>*/}
        </View>

        <View style={styles.selectContainer}>
          {
            userList.map((val, index) =>
              <SelectPerson key={index} select={val.selected} name={val.name} change={select} num={index}/>
            )
          }
        </View>

        <View>
          <TouchableOpacity onPress={() => submit({taskId: taskId})}>
            <View style={[styles.person, {backgroundColor: Colors.btnPrimaryBg}]}>
              <Text style={styles.personText}>
                确认
              </Text>
            </View>
          </TouchableOpacity>
        </View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    alignItems: 'center',
  },
  taskContainer: {
    marginTop: 40,
    alignItems: 'center',
  },
  selectContainer: {
    marginTop: 20,
    alignItems: 'center',
  },
  person: {
    marginTop: 10,
    paddingTop: 5,
    paddingBottom: 5,
    paddingLeft: 20,
    paddingRight: 20,
    borderRadius: 5,
    width: 250,
  },
  unselectBg: {
    backgroundColor: Colors.unselectGrayBg,
  },
  selectBg: {
    backgroundColor: Colors.selectGrayBg,
  },
  personText: {
    fontSize: 24,
    color: '#fff',
    textAlign: 'center',
  },
});




